import { ChangeEvent, FC, KeyboardEvent } from "react";

interface TextBoxProps {
  placeholder?: string;
  type?: string;
  value?: string;
  onChange: (value: string) => void;
  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
}

const TextBox: FC<TextBoxProps> = ({
  placeholder,
  type,
  value,
  onChange,
  onKeyDown,
}) => (
  <input
    className="rpv-core__textbox"
    placeholder={placeholder}
    type={type}
    value={value}
    onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
    onKeyDown={onKeyDown}
  />
);

TextBox.defaultProps = {
  onKeyDown: () => {},
  type: "text",
  placeholder: "",
  value: "",
};

export default TextBox;
